<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { Button, message, Select, Space, Table, Tag } from 'ant-design-vue';

import AccountEntryModal from './components/AccountEntryModal.vue';

const { SelectOption } = Select;

// 响应式数据
const loading = ref(false);
const selectedItem = ref(null);
const orderStatus = ref('');
const selectedOrders = ref([]);
const accountEntryVisible = ref(false);
const selectedOrder = ref(null);

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
});

// 夜审处理项目
const auditItems = ref([
  {
    id: 1,
    title: '逾期退房',
    icon: 'ant-design:clock-circle-outlined',
    color: '#ff4d4f',
    count: 5,
    status: 'pending',
  },
  {
    id: 2,
    title: '未到店订单',
    icon: 'ant-design:user-delete-outlined',
    color: '#faad14',
    count: 3,
    status: 'pending',
  },
  {
    id: 3,
    title: '钟点房到期',
    icon: 'ant-design:hourglass-outlined',
    color: '#1890ff',
    count: 8,
    status: 'pending',
  },
  {
    id: 4,
    title: '维修房到期',
    icon: 'ant-design:tool-outlined',
    color: '#52c41a',
    count: 2,
    status: 'completed',
  },
  {
    id: 5,
    title: '房租预审',
    icon: 'ant-design:calculator-outlined',
    color: '#722ed1',
    count: 12,
    status: 'pending',
  },
]);

// 订单数据
const orders = ref([
  {
    id: 1,
    orderNo: 'HT20241216001',
    guestName: '张三',
    roomNo: '101',
    checkInTime: '2024-12-16 14:00',
    checkOutTime: '2024-12-17 12:00',
    status: 'overdue',
    amount: 299,
    type: 'overdue',
  },
  {
    id: 2,
    orderNo: 'HT20241216002',
    guestName: '李四',
    roomNo: '205',
    checkInTime: '2024-12-16 15:00',
    checkOutTime: '2024-12-16 18:00',
    status: 'no_show',
    amount: 150,
    type: 'no_show',
  },
  {
    id: 3,
    orderNo: 'HT20241216003',
    guestName: '王五',
    roomNo: '308',
    checkInTime: '2024-12-16 10:00',
    checkOutTime: '2024-12-16 14:00',
    status: 'hourly',
    amount: 120,
    type: 'hourly',
  },
  {
    id: 4,
    orderNo: 'HT20241216004',
    guestName: '赵六',
    roomNo: '401',
    checkInTime: '2024-12-15 14:00',
    checkOutTime: '2024-12-16 12:00',
    status: 'maintenance',
    amount: 399,
    type: 'maintenance',
  },
]);

// 表格列配置
const orderColumns = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    width: 150,
  },
  {
    title: '客人姓名',
    dataIndex: 'guestName',
    key: 'guestName',
    width: 100,
  },
  {
    title: '房间号',
    dataIndex: 'roomNo',
    key: 'roomNo',
    width: 80,
  },
  {
    title: '入住时间',
    dataIndex: 'checkInTime',
    key: 'checkInTime',
    width: 150,
  },
  {
    title: '退房时间',
    dataIndex: 'checkOutTime',
    key: 'checkOutTime',
    width: 150,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
    width: 100,
  },
  {
    title: '操作',
    key: 'actions',
    width: 200,
    fixed: 'right' as const,
  },
];

// 计算属性
const filteredOrders = computed(() => {
  if (!orderStatus.value) {
    return orders.value;
  }
  return orders.value.filter((order) => order.type === orderStatus.value);
});

// 行选择配置
const rowSelection = {
  selectedRowKeys: selectedOrders,
  onChange: (selectedRowKeys: any[], selectedRows: any[]) => {
    selectedOrders.value = selectedRowKeys;
  },
};

// 方法
const selectAuditItem = (item: any) => {
  selectedItem.value = item;
  // 根据选择的项目过滤订单
  switch (item.title) {
    case '未到店订单': {
      orderStatus.value = 'no_show';

      break;
    }
    case '维修房到期': {
      orderStatus.value = 'maintenance';

      break;
    }
    case '逾期退房': {
      orderStatus.value = 'overdue';

      break;
    }
    case '钟点房到期': {
      orderStatus.value = 'hourly';

      break;
    }
    default: {
      orderStatus.value = '';
    }
  }
};

const handleStartNightAudit = () => {
  message.info('开始夜审处理...');
  // 这里可以调用夜审API
};

const handleRefresh = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    message.success('数据已刷新');
  }, 1000);
};

const handleStatusChange = (value: string) => {
  orderStatus.value = value;
};

const handleBatchProcess = () => {
  if (selectedOrders.value.length === 0) {
    message.warning('请选择要处理的订单');
    return;
  }
  message.info(`批量处理 ${selectedOrders.value.length} 个订单`);
};

const handleViewOrder = (record: any) => {
  message.info(`查看订单: ${record.orderNo}`);
};

const handleAccountEntry = (record: any) => {
  selectedOrder.value = record;
  accountEntryVisible.value = true;
};

const handleProcess = (record: any) => {
  message.info(`处理订单: ${record.orderNo}`);
};

const handleAccountEntrySuccess = () => {
  message.success('入账成功');
  accountEntryVisible.value = false;
};

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    overdue: 'red',
    no_show: 'orange',
    hourly: 'blue',
    maintenance: 'green',
  };
  return colorMap[status] || 'default';
};

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    overdue: '逾期退房',
    no_show: '未到店',
    hourly: '钟点房',
    maintenance: '维修房',
  };
  return textMap[status] || status;
};

// 生命周期
onMounted(() => {
  // 初始化数据
  pagination.value.total = orders.value.length;
});
</script>

<template>
  <div class="night-audit-container">
    <div class="night-audit-header">
      <h2>夜审管理</h2>
      <div class="header-actions">
        <Button type="primary" @click="handleStartNightAudit">
          <IconifyIcon icon="ant-design:play-circle-outlined" />
          开始夜审
        </Button>
        <Button @click="handleRefresh">
          <IconifyIcon icon="ant-design:reload-outlined" />
          刷新
        </Button>
      </div>
    </div>

    <div class="night-audit-content">
      <!-- 左侧夜审处理项目 -->
      <div class="audit-items-panel">
        <div class="panel-header">
          <h3>夜审处理项目</h3>
          <Tag color="blue">{{ auditItems.length }}项</Tag>
        </div>

        <div class="audit-items-list">
          <div
            v-for="item in auditItems"
            :key="item.id"
            class="audit-item"
            :class="{ active: selectedItem?.id === item.id }"
            @click="selectAuditItem(item)"
          >
            <div class="item-icon">
              <IconifyIcon :icon="item.icon" :color="item.color" />
            </div>
            <div class="item-content">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-count">
                <Tag :color="item.count > 0 ? 'red' : 'green'">
                  {{ item.count }}条
                </Tag>
              </div>
            </div>
            <div class="item-status">
              <Tag :color="item.status === 'pending' ? 'orange' : 'green'">
                {{ item.status === 'pending' ? '待处理' : '已完成' }}
              </Tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧订单列表 -->
      <div class="orders-panel">
        <div class="panel-header">
          <h3>订单列表</h3>
          <div class="header-filters">
            <Select
              v-model:value="orderStatus"
              placeholder="订单状态"
              style="width: 120px"
              @change="handleStatusChange"
            >
              <SelectOption value="">全部</SelectOption>
              <SelectOption value="overdue">逾期退房</SelectOption>
              <SelectOption value="no_show">未到店</SelectOption>
              <SelectOption value="hourly">钟点房</SelectOption>
              <SelectOption value="maintenance">维修房到期</SelectOption>
            </Select>
            <Button
              @click="handleBatchProcess"
              :disabled="selectedOrders.length === 0"
            >
              批量处理
            </Button>
          </div>
        </div>

        <Table
          :columns="orderColumns"
          :data-source="filteredOrders"
          :row-selection="rowSelection"
          :pagination="pagination"
          :loading="loading"
          row-key="id"
          size="small"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <Tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </Tag>
            </template>

            <template v-else-if="column.key === 'amount'">
              <span class="amount">¥{{ record.amount.toFixed(2) }}</span>
            </template>

            <template v-else-if="column.key === 'actions'">
              <Space>
                <Button
                  type="link"
                  size="small"
                  @click="handleViewOrder(record)"
                >
                  查看
                </Button>
                <Button
                  type="link"
                  size="small"
                  @click="handleAccountEntry(record)"
                >
                  入账
                </Button>
                <Button type="link" size="small" @click="handleProcess(record)">
                  处理
                </Button>
              </Space>
            </template>
          </template>
        </Table>
      </div>
    </div>

    <!-- 入账弹窗 -->
    <AccountEntryModal
      v-model:visible="accountEntryVisible"
      :order="selectedOrder"
      @success="handleAccountEntrySuccess"
    />
  </div>
</template>

<style scoped>
.night-audit-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f5f5f5;
}

.night-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.night-audit-header h2 {
  margin: 0;
  color: #262626;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.night-audit-content {
  display: flex;
  flex: 1;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

.audit-items-panel {
  display: flex;
  flex-direction: column;
  width: 300px;
  background: white;
  border-radius: 8px;
}

.orders-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: white;
  border-radius: 8px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-header h3 {
  margin: 0;
  color: #262626;
}

.header-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.audit-items-list {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}

.audit-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.3s;
}

.audit-item:hover {
  background: #f5f5f5;
}

.audit-item.active {
  background: #e6f7ff;
  border-color: #1890ff;
}

.item-icon {
  margin-right: 12px;
  font-size: 20px;
}

.item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.item-title {
  font-weight: 500;
  color: #262626;
}

.item-count {
  font-size: 12px;
}

.item-status {
  margin-left: 8px;
}

.amount {
  font-weight: 500;
  color: #1890ff;
}

:deep(.ant-table-wrapper) {
  flex: 1;
  overflow: hidden;
}

:deep(.ant-table) {
  height: 100%;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 500;
  background: #fafafa;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: #f5f5f5;
}
</style>
